<template>
  <div class="app-banner">
    <el-carousel motion-blur height="500px">
      <el-carousel-item v-for="item in banners" :key="item">
        <el-image :src="item.imgUrl"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { getBanner } from '@/apis/home';
import { onMounted, ref } from 'vue';

const banners = ref([])

const getBannerData = async () => {
  const res = await getBanner()
  banners.value = res.result
}
onMounted(() => getBannerData())


</script>

<style lang="scss" scoped>
.app-banner {
  width: 100%;
  height: 500px;
  position: absolute;
  top: 0;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
